<template>
	<view>
		<view class="title_top">
			<view>单选 <text>1/2</text></view>
			<view>多选 <text>1/2</text></view>
			<view>判断 <text>1/2</text></view>
		</view>
		<view>
			<swiper :indicator-dots="false" :current='swiperIndex' @change='change' :autoplay="false" id="swiperItem" :duration="1000"
			 :style="{height: swiperHeight+'px'}">
				<block v-for="(item,index) in List" :key='index'>
					<swiper-item>
						<view class="swiper-item">
							<view>
								<view>1.这是一个题目:</view>
							</view>
							<view v-if="item.type === 1||item.type === 3">
								<u-radio-group :wrap='true' v-model="item.value" @change="radioGroupChange">
									<u-radio v-if="item.selectA" name='A'>
										<text>A:{{item.selectA}}</text>
									</u-radio>
									<u-radio v-if="item.selectB" name='B'>
										<text>B:{{item.selectB}}</text>
									</u-radio>
									<u-radio v-if="item.selectC" name='C'>
										<text>C:{{item.selectC}}</text>
									</u-radio>
									<u-radio v-if="item.selectD" name='D'>
										<text>D:{{item.selectD}}</text>
									</u-radio>
									<u-radio v-if="item.selectE" name='E'>
										<text>E:{{item.selectF}}</text>
									</u-radio>
									<u-radio v-if="item.selectF" name='F'>
										<text>F:{{item.selectF}}</text>
									</u-radio>
								</u-radio-group>
							</view>
							<view v-if="item.type === 2">
								<u-checkbox-group :wrap='true' @change="checkboxGroupChange">
									<u-checkbox v-if="item.selectA" v-model="item.optionsA.checked" :disabled="false" name="A">A:{{item.selectA}}</u-checkbox>
									<u-checkbox v-if="item.selectB" v-model="item.optionsB.checked" :disabled="false" name="B">B:{{item.selectB}}</u-checkbox>
									<u-checkbox v-if="item.selectC" v-model="item.optionsC.checked" :disabled="false" name="C">C:{{item.selectC}}</u-checkbox>
									<u-checkbox v-if="item.selectD" v-model="item.optionsD.checked" :disabled="false" name="D">D:{{item.selectD}}</u-checkbox>
									<u-checkbox v-if="item.selectE" v-model="item.optionsE.checked" :disabled="false" name="E">E:{{item.selectE}}</u-checkbox>
									<u-checkbox v-if="item.selectF" v-model="item.optionsF.checked" :disabled="false" name="F">F:{{item.selectF}}</u-checkbox>
								</u-checkbox-group>
							</view>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="btnTitle">
			<view @click="onTopic">上一题</view>
			<view @click="nextQuestion">下一题</view>
		</view>
		<view class="theirPapers" @click="btnTheirPapers">
			立即交卷
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight: 500,
				List: [],
				value: '',
				swiperIndex: 0,
				daxanswerList: [],
				duxanswerList: [],
				pdanswerList: [],
			};
		},
		onLoad(option) {
			this.getexamtopics(option.id);
		},
		mounted() {
			// 动态改变高度
			// const query = uni.createSelectorQuery().in(this);
			//             query.select('#swiperItem').boundingClientRect(data => {
			//                 this.swiperHeight = data.height;
			//             }).exec();
		},
		methods: {
			btnTheirPapers() {
				console.log(this.swiperIndex);
				console.log(this.List.length);
				if(this.swiperIndex+1 !== this.List.length){
					this.$refs.uToast.show({
						title: '请先做完题目',
						type: 'error',
					});
					return;
				}
				uni.navigateTo({
					url: `./theirPapers?dax=${JSON.stringify(this.daxanswerList)}&dux=${JSON.stringify(this.duxanswerList)}&pd=${JSON.stringify(this.pdanswerList)}`
				})
			},
			getexamtopics(id) {
				this.$u.api.getexamtopics({
					id: id
				}).then(res => {
					res.data.data.forEach(item => {
						if (item.type === 1 || item.type === 3) {
							item.value = ''
						} else if (item.type === 2) {
							item.value = [];
							item.optionsA = {};
							item.optionsA.name = item.selectA;
							item.optionsA.checked = false;
							item.optionsB = {};
							item.optionsB.name = item.selectB;
							item.optionsB.checked = false;
							item.optionsC = {};
							item.optionsC.name = item.selectC;
							item.optionsC.checked = false;
							item.optionsD = {};
							item.optionsD.name = item.selectD;
							item.optionsD.checked = false;
							item.optionsD = {};
							item.optionsD.name = item.selectD;
							item.optionsD.checked = false;
							item.optionsE = {};
							item.optionsE.name = item.selectE;
							item.optionsE.checked = false;
							item.optionsF = {};
							item.optionsF.name = item.selectF;
							item.optionsF.checked = false;
						}
					})
					this.List = res.data.data;
				})
			},
			radioGroupChange(e) {
				this.List[this.swiperIndex].value = e
			},
			checkboxGroupChange(e) {
				this.List[this.swiperIndex].value = e.toString();
			},
			onTopic() {
				if (this.swiperIndex === 0 ) {
					this.$refs.uToast.show({
						title: '已经第一页了',
						type: 'error',
					})
				} else {
					this.swiperIndex--;
				}
			},
			nextQuestion() {
				if (!this.List[this.swiperIndex].value || this.List[this.swiperIndex].value.length === 0){
					this.$refs.uToast.show({
						title: '请先作答',
						type: 'error',
					});
					return;
				}
				if (this.swiperIndex === this.List.length) {
					this.$refs.uToast.show({
						title: '已经最后一页了',
						type: 'error',
					})
				} else {
					if (this.swiperIndex ===  this.daxanswerList.length + this.duxanswerList.length + this.pdanswerList.length) {
						if (this.List[this.swiperIndex].type === 1 || this.List[this.swiperIndex].type === 3) {
							console.log(this.List[this.swiperIndex])
							if (this.List[this.swiperIndex].correct === this.List[this.swiperIndex].value) {
								let data = {
									index: this.swiperIndex,
									isanswer: true
								}
								if (this.List[this.swiperIndex].type === 1) {
									this.daxanswerList.push(data)
								} else if (this.List[this.swiperIndex].type === 3) {
									this.pdanswerList.push(data)
								}
							} else {
								let data = {
									index: this.swiperIndex,
									isanswer: false
								}
								if (this.List[this.swiperIndex].type === 1) {
									this.daxanswerList.push(data)
								} else if (this.List[this.swiperIndex].type === 3) {
									this.pdanswerList.push(data)
								}
							}
						} else if (this.List[this.swiperIndex].type === 2) {
							console.log(this.List[this.swiperIndex].value);
							if (this.List[this.swiperIndex].correct === this.List[this.swiperIndex].value) {
								let data = {
									index: this.swiperIndex,
									isanswer: true
								}
								this.duxanswerList.push(data);
								console.log(this.duxanswerList)
							} else {
								let data = {
									index: this.swiperIndex,
									isanswer: false
								}
								this.duxanswerList.push(data);
							}
						}
					}
					if(this.swiperIndex === this.List.length-1){
						this.$refs.uToast.show({
							title: '已经最后一页了',
							type: 'error',
						})
						return;
					}else{
						this.swiperIndex++
					}
				}
			},
			change(e) {
				this.swiperIndex = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title_top {
		display: flex;
		padding: 20rpx;
		background: #534e64;
		color: #fff;

		>view {
			flex: 1;
			text-align: center;
			font-size: 35rpx;

			>text {
				font-size: 15rpx;
				margin-left: 10rpx;
			}
		}
	}

	.swiper-item {
		>view {
			&:nth-child(1) {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				color: #6b747a;
				border-bottom: 1rpx solid #eee;

				>view {
					&:nth-child(1) {
						font-size: 30rpx;
					}

					&:nth-child(2) {
						font-size: 35rpx;
						color: #ff5555;
					}
				}
			}

			&:nth-child(2) {
				padding: 20rpx;
				display: flex;
				flex-flow: column;
				font-size: 30rpx;

				>text {
					border-bottom: 1rpx solid #EEE;
					padding: 20rpx;
				}
			}
		}
	}

	.btnTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;

		>view {
			font-size: 30rpx;
			padding: 10rpx 40rpx;
			background: #fff;
			border: 1rpx solid #ababab;
			border-radius: 30rpx;
			margin: 20rpx;
		}
	}

	.theirPapers {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #fff;
		font-size: 25rpx;
		background: #8c84f3;
		text-align: center;
		padding: 30rpx;
	}
</style>
